<style>
  #app{display: table;width:100%;}
  body{background: #fff;}
 .identity .main-title{text-align: left;margin:10px 20px 20px;padding:20px;border-bottom: 1px solid #dcdcdc;color:#999;font-size:14px;}

.identity  .identity_all{
  	border:1px solid #dcdcdc;
  	margin-top:20px;
  	padding-bottom: 50px;
  }
.identity  .identity_all .identity_header{
  	border-width:0 0 1px 0;
  	margin-top:0;
  }
 .identity .identity_content .el-form{
  	max-width:540px;
  	margin:0 auto;
  }
 .identity .identype{display: flex;flex-direction: column;}
 .identity .identype .el-form-item__label{text-align: left;}
 .identity .info_item{padding:15px 0;}
 .identity .info_label{width: 80px;display: inline-block;}
</style>
<template>
  <div>
    <div class="">
		
	    <div class="login_content identity">  
	  		<div class="usercenter_all">
  				<div class="identity_header">      			
  	      			<el-breadcrumb separator="/" class="bread" id="mybread">
  				        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
  				          {{ item.meta.name || item.name }}
  				        </el-breadcrumb-item>
  				      </el-breadcrumb>
  	      		</div>
  			</div>   
	  		<div v-if="!isRealName" class="usercenter_all identity_all">
	  			<div class="identity_header">初级身份认证</div>
	  			<div class="identity_content">
		            <h1 class="main-title">请确保您使用本人的真实身份进行验证，我们会保护您的个人信息安全</h1>

	  				<el-form :model="identForm" class="login-form" :rules="identFormRules" ref="identForm">
			             
			            <el-form-item label="姓名"  prop="realName">
			              <el-input  :autofocus="true" placeholder="姓名"  v-model="identForm.realName">
			              </el-input>
			            </el-form-item>
			            <el-form-item label="证件类型" class="identype"  prop="idCardType">
			              <el-select v-model="identForm.idCardType" placeholder="请选择">
						    <el-option label="身份证" value="1"> </el-option>
						    <el-option label="军官证" value="2"> </el-option>
						    <el-option label="护照" value="3"> </el-option>
						  </el-select>
			            </el-form-item>
			             <el-form-item label="证件号"  prop="idCard">
			              <el-input	:autofocus="true"     placeholder="证件号"     v-model="identForm.idCard">
			              </el-input>
			            </el-form-item>
			         
			
			            <el-form-item class="btn_reg">
			              <el-button  @click.native="identSubmit" type="primary" :loading="isBtnLoading">提交</el-button>
			            </el-form-item>
			          
			          </el-form>
	  			</div>	
	  		</div>
	  		<div v-if="isRealName" class="usercenter_all identity_all">
	  			<div class="identity_header">初级身份认证</div>
	  			<div class="identity_content">
	  				<div class="el-form">
	  					<h3>认证信息</h3>
	  					<div class="identity_info">
	  						<div class="info_item">
	  							<span class="info_label">真实姓名</span>
	  							<span>{{userInfo.realName}}</span>
	  						</div>
	  						<div class="info_item">
	  							<span class="info_label">证件类型</span>
	  							<span>{{userInfo.idCardType}}</span>
	  						</div>
	  						<div class="info_item">
	  							<span class="info_label">证件号码</span>
	  							<span>{{userInfo.idCard}}</span>
	  						</div>
	  						<div class="info_item">
	  							<span class="info_label">认证时间</span>
	  							<span>{{userInfo.authTime}}</span>
	  						</div>
	  					</div>
	  				</div>
	  			</div>
	  		</div>		
	   
	    </div>
		
    </div>
   
  </div>
</template>

<script>
import * as users from '../api/users';
import myHeader from './common/header'



var code ; //在全局定义验证码
export default {
  components:{
    myHeader
  },
	computed: {   
	   
  	},
  data() {
    return {
    	isBtnLoading:false,
    	identForm:{authLevel:1},
    	identFormRules:{    		
	        realName: [
	          { required: true, message: '请输入姓名', trigger: 'blur' }
	        ],
			idCardType: [
	          { required: true, message: '请选择证件类型', trigger: 'change' }
	        ],
			idCard: [
	          { required: true, message: '请输入证件号', trigger: 'blur' }
	        ],
    	},
    	userId:'',
    	list:[],
    	showCount:20,
		total:0,
      	page: 1,
		onOff:true,
   
      picLyanzhengma:'',
      checkCode:'',
      username: '',
      password: '',
      isBtnLoading: false,
      routerPath:'',
      isRealName:false,
      userInfo:'',
    };
  },
  computed: {   
 	activeMenu: function(){
      // return this.$route.name
      return this.$route.path
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    }
  },
  methods: {
  	 //数字显示转换
    formatSex: function (row) {
    	console.log(row)
      return row.idCardType == 1 ? '身份证' : row.idCardType == 2 ? '军官证' : '护照';
    },
  	identSubmit(){
      this.$refs.identForm.validate((valid) => {
        if (valid) {
        	let para=this.identForm;
        	para.userId=this.userId;
        	console.log(para);
        	users.identAuth.r(para).then((res)=>{
        		console.log(res)
        		if(res.data.retCode==1){
        			this.fetchDataUser();
        			this.isRealName=true;
        		}else{
        			this.$message.error(res.data.retMsg);
        		}
        	})
        }else{
          console.log('error submit!!');
          return false;
        }
      })

  	},
 	handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

 	fetchData(init) {
      this.loading = true;
      if(!this.$_has([users.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          keyword:this.filters.name
        };
        if(this.groupId!=undefined&&this.groupId!="undefined"&&this.groupId!=""){
          this.$set(para,'groupId',this.groupId)
        }
      users.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data.list;
        
        if(this.list!=null){
          this.list.map(x=>{
            this.$set(x,'showIndex',2)  
            this.$set(x,'showClose',false)       
            this.$set(x,'showCloseG',false)       
            this.$set(x,'showIndexG',2)         
          })
        }

        this.loading = false;
      });
    },
    fetchDataUser(){
    	//获取用户信息
    	let para={
    		userId:this.userId,
    	}
	  	users.info.r(para).then((res) => {
	  		console.log(res)
	  		if(res.data.retCode==1){
  				this.identForm.authLevel=res.data.data.authLevel;
  				this.realName=res.data.data.realName;
  				if(res.data.data.realName){
  					this.isRealName=true;
  				}else{
  					this.isRealName=false;
  				}
  				this.userInfo=res.data.data;
  				this.userInfo.idCardType=this.formatSex(this.userInfo);
  				sessionStorage.setItem("localUser",JSON.stringify(res.data.data))

	  		}else{
	  			this.$message.error(res.data.retMsg);
	  		}
	       
	       

	      });
    },
  	handEdit(){

  	},

  },

  created() {
    // this.fetchData();
    this.userId=sessionStorage.getItem("userId");
    this.fetchDataUser();
    
  }
};
</script>
